<template>
  <div>
    <el-steps :active="active" simple>
      <el-step title="选择授权主体"></el-step>
      <el-step title="选择授权作用"></el-step>
    </el-steps>
    <el-form
      :model="form"
      ref="form"
      label-width="100px"
      label-position="top"
      size="small"
      :rules="rules"
      v-show="active === 1"
    >
      <el-form-item label="选择授权主体" prop="a">
        <div class="user-select">
          <div class="user-select-left">
            <el-tabs v-model="activeName">
              <el-tab-pane label="角色" name="first">
                <el-input
                  placeholder="搜索角色名称"
                  v-model="searchValueRole"
                ></el-input>
                <el-empty
                    style="padding: 0"
                    description="暂无数据"
                    v-if="roleList&&roleList.length == 0"
                ></el-empty>
                <el-checkbox-group v-model="checkedRole">
                  <el-checkbox
                    v-for="(item, i) in roleList"
                    :key="i"
                    :label="item"
                  >
                    {{ item.baseName }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="user-select-right">
            <el-empty
                style="padding: 0"
                description="暂无数据"
                v-if="checkedUserAndRole&&checkedUserAndRole.length == 0"
            ></el-empty>
            <div v-else>
              <span>已选：{{ checkedUserAndRole.length }}个主体</span>
            </div>
            <div class="user-select-list">
              <div
                class="user-item"
                v-for="(item, i) in checkedUserAndRole"
                :key="i"
              >
                <el-avatar size="small" shape="square" src=""></el-avatar>
                <span>{{ item.baseName }}</span>
                <i
                  class="el-icon-close user-item-del"
                  @click="delItem(item)"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-form
      :model="form"
      ref="form2"
      label-width="100px"
      label-position="top"
      size="small"
      :rules="rules2"
      v-show="active === 2"
    >
      <el-form-item label="选择应用" prop="b">
        <div class="page2-title">{{ info.baseName }}</div>
        <div>已选授权主体：{{ checkedUserAndRole.length }}个</div>
        <div class="list-box">
          <div
            class="list-item"
            v-for="(item, i) in checkedUserAndRole"
            :key="i"
          >
            {{ item.baseName }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="选择授权作用" prop="c">
        <el-radio-group v-model="form.c">
          <el-radio label="true">允许</el-radio>
          <el-radio label="false">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <template v-if="active === 1">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </template>
      <template v-else>
        <el-button @click="active--">上一步</el-button>
        <el-button type="primary" @click="submit">保 存</el-button>
      </template>
    </div>
  </div>
</template>
<script>
import { listRole } from '@/api/system/role'
import { addClientAuthorize } from '@/api/userCenter'

export default {
  name: "SelectBoxSearch",
  components: {},
  props:{
    info:{
      type:Object,
      default:{}
    },
    selectRole:{
      type: Array,
      default: []
    }
  },
  data() {
    return {
      rules: {
        a: [
          {
            required: true,
            message: "请选择授权主体",
            trigger: "blur",
            type: "array",
          },
        ],
      },
      rules2:{
        c: [
          {
            required: true,
            message: "请选择授权作用",
            trigger: "change",
          },
        ],
      },
      form: {
        a: [],
        c:''
      },
      queryParams:{
        baseName:'',
        pageNum:1,
        pageSize:10
      },
      activeName: "first", // 默认选中用户tab
      active: 1,
      checkedRole: [], // 选中的角色
      roleList: [],
      searchValueRole: "", // 角色搜索值
    };
  },
  created() {
    this.init()
  },
  watch: {
    searchValueRole(val){
      this.queryParams.baseName = val
      this.init()
    },
  },
  computed: {
    checkedUserAndRole() {
      this.form.a = this.checkedRole;
      return this.checkedRole
    },
  },
  methods: {
    init(){
      listRole(this.queryParams).then(
          (response) => {
            this.roleList = response.obj.content;
            this.checkedRole = this.roleList.filter(item=>{
              if (this.selectRole.includes(item.baseId)){
                return item
              }
            })
          }
      );
    },
    next() {
      // this.active++;
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.active++;
        } else {
          return false;
        }
      });
    },
    delItem(item) {
      this.checkedRole = this.checkedRole.filter((v) => v !== item);
    },
    cancel() {
      this.$emit("close");
    },
    clearForm(){
      this.$refs.form.resetFields();
      this.$refs.form2.resetFields();
      this.active = 1
      this.checkedRole = this.roleList.filter(item=>{
        if (this.selectRole.includes(item.baseId)){
          return item
        }
      })
      this.searchValueRole = ''
    },
    submit() {
      this.$refs.form2.validate((valid) => {
        if (valid) {
          const params = this.checkedUserAndRole.map(item=>{
            return {
              clientId:this.info.baseId,
              subjectId:item.baseId,
              isEnable:true,
              isAuth:this.form.c,
              subjectType:1
            }
          })
          addClientAuthorize(params).then(res=>{
            if (res.code === 0){
              this.$message.success('添加授权成功')
              this.$emit("close");
            }
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-select {
  display: flex;
  background: #f5f7fa;
  padding: 20px;

  .user-select-left {
    width: 300px;
    // border: 1px solid #ebeef5;
    background: #fff;
    margin-right: 20px;
    padding: 20px;
    .el-checkbox-group {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      ::v-deep .el-checkbox {
        margin-bottom: 10px;
      }
    }
  }
  .user-select-right {
    flex: 1;
    padding: 20px;
    // border: 1px solid #ebeef5;
    background: #fff;

    > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      align-items: center;
    }
    .user-select-list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .user-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        position: relative;
        width: 100%;

        span {
          margin-left: 10px;
        }
        .user-item-del {
          cursor: pointer;
          position: absolute;
          right: 0;
        }
      }
    }
  }
}
.dialog-footer {
  text-align: right;
}
.page2-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.list-box {
  display: flex;
  flex-wrap: wrap;
  .list-item {
    padding: 10px;
    width: 45%;
    border: 1px solid #ebeef5;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
<style lang="scss"></style>
